<!--
 * @Author: liwei 474083297@qq.com
 * @Date: 2024-05-07 19:42:58
 * @LastEditors: liwei 474083297@qq.com
 * @LastEditTime: 2024-05-21 15:28:13
 * @FilePath: /app/src/home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="home">
		<el-tabs v-model="activeName" @tab-click="handleClick" class="tab">
			<el-tab-pane label="组织机构" name="org">
				<org-home></org-home>
			</el-tab-pane>
			<el-tab-pane label="操作日志" name="logs">
				<auth-logs-home ref="authLogsHome"></auth-logs-home>
			</el-tab-pane>
			<el-tab-pane label="登录管理页面" name="system">
				<system-home ref="systemHome"></system-home>
			</el-tab-pane>
      <el-tab-pane label="系统管理" name="login">
        <login ref="Login" @sendData="currentLoginedUser"></login>
      </el-tab-pane>
      <p>当前登录用户为: {{ currentLoginedUser }}</p>
		</el-tabs>
	</div>
</template>

<script>
import AuthLogsHome from './authLogsHome.vue';
import orgHome from './orgHome.vue';
import systemHome from './systemHome.vue';
import Login from "./login.vue";
export default {

	components: { orgHome, AuthLogsHome, systemHome ,Login},
	name: 'AppHome',

	data() {
		return { activeName: 'org' ,
      currentLoginedUser: ''};

	},

	mounted() {
		localStorage.setItem('currentUser', null);
    this.currentLoginedUser = localStorage.getItem('currentUser')
	},

	methods: {
		handleClick(tab) {
			if (tab.index == '1') {
				this.$refs.authLogsHome.requestLogs();
			}
			console.log(tab, event);
		},
    userLogined(username) {
      this.currentLoginedUser = username;
      console.log('name--', username)
    }
	}
};
</script>

<style lang="scss" scoped>
.home {
	width: 100%;
	height: 100%;
	box-sizing: border-box;

	// tab切换时出现蓝色边框问题解决
	.el-tabs__item:focus.is-active.is-focus:not(:active) {
		box-shadow: none !important; //切换阴影
		border-radius: 0 !important;
	}
  .tab{
    height: 100%;
  }
}
</style>
